<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>Title</title>
	<style>
		#box {
			width: 450px;
			margin: 200px auto;
		}
		
		#txt {
			width: 350px;
		}
		
		#pop {
			width: 350px;
			border: 1px solid red;
		}
		
		#pop ul {
			margin: 10px;
			padding: 0px;
			width: 200px;
			list-style-type: none;
		}
		
		#pop ul li {}
	</style>

</head>

<body>

	<div id="box">
		<input type="text" id="txt">
		<input type="button" value="搜索" id="btn">
	</div>

	<script src="common.js"></script>
	<script>
			//模拟从服务器获取的数据
			var array = ["aaaa", "abcdef", "abbbcccdd", "axxxxyyyy", "aabbcc"];
			//1 给文本框注册事件
			var txt = my$("txt");
			//键盘弹起 onkeyup
			txt.onkeyup = function() {
				//获取文本框中输入的内容
				var v = this.value;
				//2 找array数组中 以文本框中的内容开头的那些内容
				var tmpArray = [];
				for(var i = 0; i < array.length; i++) {
					//判断数组中的每一个字符串是否是以v 开头的
					var item = array[i];
					if(item.indexOf(v) === 0) {
						tmpArray.push(item);
					}
				}

				var box = my$("box");
				//4 动态创建popDiv之前，先检查box中是否已经有popDiv，如果已经有了。移除
				var popDiv = my$("pop");
				//问题2 解决删除到文本框没有内容，也会弹出popDiv
				if(v.length === 0) {
					//如果文本框的内容为空，删除popDiv，并返回
					console.log(popDiv);
					//解决，如果文本框中没有内容，并且页面上没有popDiv，
					//此时获取的popDiv是null，调用removeChild会报错
					if(popDiv) {
						box.removeChild(popDiv);
					}
					return;
				}
				//问题1 解决popDiv会追加
				if(popDiv) {
					box.removeChild(popDiv);
				}
				//问题3 如果没有以输入内容开头的，不生成popDiv
				if(tmpArray.length === 0) {
					return;
				}
				//3 动态创建元素
				//在内存中创建了dom对象--div
				popDiv = document.createElement("div");
				//box中追加子元素popDiv
				box.appendChild(popDiv);
				//设置div的id
				popDiv.id = "pop";
				//创建ul
				var ul = document.createElement("ul");
				popDiv.appendChild(ul);
				for(var i = 0; i < tmpArray.length; i++) {
					var item = tmpArray[i];
					var li = document.createElement("li");
					ul.appendChild(li);
					setInnerText(li, item);
				}

			}
		</script>
</body>

</html>